ZIP.namespace('Cache.Widget');
/////////////////////////////////////////////////////////////////////////////////////
// Example of use:
// var appw = ZIP.Widget.AppWindow.init().setTitle('A Window').display(true);
//
ZIP.Cache.Widget.AppWindow = function() {
    // a window that has a border, title banner with 2 buttons (settings n close) and
    // a footer banner.  the calling app sets the title and behaviour for the 2 buttons
    // typically the workSpace element will have attached to it an activity object, 
    // eg. an AppLogger object.  

    // the default theme (styles) to use
    var _defaultThemeDefs = {
	appWin: {},
	titleBar: {},
	titleText: {},
	settingsBtn: {},
	closeBtn: {},
	footerBar: {},
	workSpace: {}
    },
    _globalTheme = ZIP.System.deepCopy(_defaultThemeDefs);

    function _constructor(theme) {
        var appWin, titleBar, titleText, settingsBtn, 
            closeBtn, footerBar, workSpace, txtNode,
            _theme = ZIP.System.replace(_globalTheme, theme || null);   // set the theme

        // reset the global theme to the default, so other instances get the default options initially
        _globalTheme = ZIP.System.deepCopy(_defaultThemeDefs);

        // the overall app window container
        appWin = document.createElement('div');
        appWin.id = ZIP.System.uid();
        appWin.className = 'appWindow';

        // set some defaults for now
        appWin.style.position = 'relative';
        appWin.style.border = '2px solid black';
        appWin.style.height = '400px'; //this will only work if position is absolut or fixed ??
        appWin.style.width = '95%';
        appWin.style.margin = '2px';
        appWin.style.backgroundColor = 'white'

        document.body.appendChild(appWin);

        // the title bar
        titleBar = document.createElement('div');
        titleBar.id = ZIP.System.uid();
        titleBar.className = 'appWindowTitle';

        titleBar.style.margin = '1px';
        titleBar.style.border = '1px solid black';
        titleBar.style.backgroundColor = '#cccccc';

        titleText = document.createElement('p');
        titleText.id = ZIP.System.uid();
        titleText.className = 'appWindowTitleText';

        titleText.style.width = '100%';
        titleText.style.textAlign = "center"
        titleText.style.margin = "3px"

        titleBar.appendChild(titleText);

        // the buttons
        // get a div to wrap the buttons
        var btnWrapper = document.createElement('div');
        btnWrapper.id = ZIP.System.uid();
        btnWrapper.style.position = 'absolute';
        btnWrapper.style.top = '2px';
        btnWrapper.style.right = '1px';

        settingsBtn = document.createElement('button');
        settingsBtn.id = ZIP.System.uid();
        settingsBtn.className = 'appWindowButton';

        settingsBtn.style.position = 'absolute';
        settingsBtn.style.right = '52px';
        settingsBtn.style.top = '1px';

        txtNode = document.createTextNode("Settings");
        settingsBtn.appendChild(txtNode);

        closeBtn = document.createElement('button');
        closeBtn.id = ZIP.System.uid();
        closeBtn.className = 'appWindowButton';

        closeBtn.style.position = 'absolute';
        closeBtn.style.right = '1px';
        closeBtn.style.top = '1px';

        txtNode = document.createTextNode("Close");
        closeBtn.appendChild(txtNode);

        btnWrapper.appendChild(settingsBtn);
        btnWrapper.appendChild(closeBtn);

        titleBar.appendChild(btnWrapper);
        appWin.appendChild(titleBar);

        // footer banner
        footerBar = document.createElement('div');
        footerBar.id = ZIP.System.uid();
        footerBar.className = 'appWindowFooterBar';

        footerBar.style.position = 'absolute';
        footerBar.style.height = '15px';
        footerBar.style.width = '100%';
        footerBar.style.left = '-1px';
        footerBar.style.bottom = '-1px';
        footerBar.style.border = '1px solid';
        footerBar.style.backgroundColor = '#cccccc';
    
        appWin.appendChild(footerBar);

        // the workspace area of the appWindow
        workSpace = document.createElement('div');
        workSpace.id = ZIP.System.uid();
        workSpace.className = 'appWindowWorkSpace';

        workSpace.style.position = 'relative';  // was absolute ********
        //workSpace.style.top = '35px';
        workSpace.style.margin = '1px';
    
        workSpace.style.height = (appWin.offsetHeight-35-22)+'px';
        workSpace.style.overflow = 'auto';

        appWin.appendChild(workSpace);
        appWin.style.display = 'none';    // don't display it
                        
        function _clear() {
            while ( appWin.children.length > 0 ) {
                appWin.removeChild(appWin.children[0]);
            }
            return this;
        }

        return {    
            setTitle: function(title) {
                titleText.innerHTML = title;
                return this;
            },
            setBehaviour: function(bFunc) {
                // bFunc is the callback func when the Settings button is clicked
                return this;
            },
            closeBehaviour: function(cFunc) {
                // cFunc is the callback when the close button is clicked
                return this;
            },
            view: function(appDom) {
                // appDom is the DOM element that is used by the calling app to
                // display it's output and is what we append to the workSpace

                //appDom.style.position = 'relative';
                //appDom.style.right = '1px';
                //appDom.style.width = '100%';
                //appDom.style.display = 'block';

                workSpace.appendChild(appDom);
                workSpace.scrollTop -= 1;
                return this;
            },
            display: function(toggle) {
                // show yourself
                appWin.style.display = toggle ? 'block' :'none';
                return this;
            },
            
            clear: _clear,
            
            close: function() {
                _clear();
                document.body.removeChild(appWin);
                
                return this;
            }
            
        }
    } // _constructor

    function Widget(theme) {
        /* copy the teme */
        // if this is called as AppWindow(theme).init() we set the global theme.
        _globalTheme = ZIP.System.replace(_defaultThemeDefs, theme); 
               
        return Widget; /*self*/
    };
    
    Widget.init = _constructor;
    return Widget;

};
